<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<div class="page-header">
	<img class="fleft titlelogo" src="img/ext/glyphicons_203_lock.png" />
	<h1>관리자</h1>
</div>
<article >
	<div class="row">
		<div class="span10 offset1 well">
			<canvas id="lineChart" data-type="Line" width="600px" height="400px"></canvas>
			<div class="legend fright">
				<span class="lgcolor" style="border-color: rgba(220,220,220,0.5);">소주</span>
				<span class="lgcolor" style="border-color: rgba(151,187,205,0.5);">맥주</span>
			</div>
		</div>
		<div class="span10 offset1 well">
			<canvas id="barChart" data-type="Bar" width="600px" height="400px"></canvas>
			<div class="legend fright">
				<span class="lgcolor" style="border-color: rgba(220,220,220,0.5);">소주</span>
				<span class="lgcolor" style="border-color: rgba(151,187,205,0.5);">맥주</span>
			</div>
		</div>
		<div class="span10 offset1 well">
			<canvas id="radarChart" data-type="Radar" width="600px" height="400px"></canvas>
			<div class="legend fright">
				<span class="lgcolor" style="border-color: rgba(220,220,220,0.5);">암살자</span>
				<span class="lgcolor" style="border-color: rgba(151,187,205,0.5);">마법사</span>
			</div>
		</div>
		<div class="span10 offset1 well">
			<canvas id="polarChart" data-type="Polar" width="600px" height="400px"></canvas>
			<div class="legend fright">
				<span class="lgcolor" style="border-color: #C7604C;">암살자</span>
				<span class="lgcolor" style="border-color: #D97041;">광전사</span>
				<span class="lgcolor" style="border-color: #21323D;">마법사</span>
				<span class="lgcolor" style="border-color: #9D9B7F;">궁수</span>
				<span class="lgcolor" style="border-color: #7D4F6D;">사제</span>
				<span class="lgcolor" style="border-color: #584A5E;">창기사</span>
			</div>
		</div>
		<div class="span10 offset1 well">
			<canvas id="pieChart" data-type="Pie" width="600px" height="400px"></canvas>
			<div class="legend fright">
				<span class="lgcolor" style="border-color: #C7604C;">암살자</span>
				<span class="lgcolor" style="border-color: #D97041;">광전사</span>
				<span class="lgcolor" style="border-color: #21323D;">마법사</span>
				<span class="lgcolor" style="border-color: #9D9B7F;">궁수</span>
				<span class="lgcolor" style="border-color: #7D4F6D;">사제</span>
				<span class="lgcolor" style="border-color: #584A5E;">창기사</span>
			</div>
		</div>
	</div>
</article>

<script src="js/Chart.min.js"></script>
<script>	
	var data = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					fillColor : "rgba(220,220,220,0.5)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					data : [65,59,90,81,56,55,40]
				},
				{
					fillColor : "rgba(151,187,205,0.5)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					data : [28,48,40,19,96,27,100]
				}
			]
		};
	var options = {};
	var ctx = document.getElementById("lineChart").getContext("2d");	
	new Chart(ctx).Line(data, options);
</script>
<script>
	var data = {
		labels : ["1월","2월","3월","4월","5월","6월","7월"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				data : [65,59,90,81,56,55,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				data : [28,48,40,19,96,27,100]
			}
		]
	};
	var options = {};
	var ctx = document.getElementById("barChart").getContext("2d");	
	new Chart(ctx).Bar(data, options);
</script>
<script>
	var data = {
		labels : ["공격","방어","민첩","지능","체력","마나","힘"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data : [85,41,99,81,64,45,40]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				pointColor : "rgba(151,187,205,1)",
				pointStrokeColor : "#fff",
				data : [28,48,40,99,56,97,23]
			}
		]
	};
	var options = {};
	var ctx = document.getElementById("radarChart").getContext("2d");	
	new Chart(ctx).Radar(data, options);
</script>
<script>
	var data = [
        	{
        		value : 65,
        		color: "#D97041"
        	},
        	{
        		value : 80,
        		color: "#C7604C"
        	},
        	{
        		value : 54,
        		color: "#21323D"
        	},
        	{
        		value : 58,
        		color: "#9D9B7F"
        	},
        	{
        		value : 82,
        		color: "#7D4F6D"
        	},
        	{
        		value : 54,
        		color: "#584A5E"
        	}
        ];
	var options = {};
	var ctx = document.getElementById("polarChart").getContext("2d");	
	new Chart(ctx).PolarArea(data, options);
</script>
<script>
	var data = [
        	{
        		value: 30,
        		color:"#F38630"
        	},
        	{
        		value : 50,
        		color : "#E0E4CC"
        	},
        	{
        		value : 100,
        		color : "#69D2E7"
        	},		
        	{
        		value : 100,
        		color : "#69D2E7"
        	},			
        	{
        		value : 100,
        		color : "#69D2E7"
        	}			
        ];
	var options = {};
	var ctx = document.getElementById("pieChart").getContext("2d");	
	new Chart(ctx).Pie(data, options);
</script>